<template>
  <div class="sign_box flex-y flex-center">
    <div
      :style="{
        fontSize: '12px',
        padding: '6px'
      }"
      class="region-tab"
      :class="'region-tab_' + type"
    >
      <div>
        湿度:
        <span
          :style="{
            color: type == 'abs1' ? '#E8FF1E' : 'red'
          }"
          >46RH</span
        >
      </div>
      <div>
        湿度:
        <span
          :style="{
            color: type == 'abs1' ? '#E8FF1E' : 'red'
          }"
          >46RH</span
        >
      </div>
    </div>
    <div class="abs " :class="type"></div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "abs1"
    }
  }
};
</script>

<style scoped>
.box {
  text-align: center;
  padding: 10px 0px;
  border: 1px solid #f1f1f1;
  margin: 0px auto;
  overflow: hidden;
}
.abs {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  border: #fff 1px solid;
  /* margin: 10px; */
  /* position: absolute; */
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* left: 50%; */
  /* transform: translate(-50%, 0); */
}

.abs::before,
.abs::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 100%;
  opacity: 0.9;
  animation: abc 2.2s infinite;
}

.abs::after {
  opacity: 0.8;
  animation-delay: 1.9s;
}

.abs1,
.abs1::after,
.abs1::before {
  background-color: rgb(30, 140, 230);
}
.abs2,
.abs2::after,
.abs2::before {
  background-color: rgb(230, 30, 30);
}

@keyframes abc {
  100% {
    transform: scale(3.8);
    opacity: 0;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/*标签底部的三角形*/
.region-tab::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #1c81f6;
  position: absolute;
  bottom: -8px;
  left: 0;
}

.region-tab {
  margin-bottom: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  flex-direction: column;
  padding: 6px 10px;
  /* width: 80px; */
  /* background-image: linear-gradient(132deg, #0d66cb 0%, #227ad7 50%, #3b92e4 100%); */
  /* height: 36px; */
  background: linear-gradient(rgba(6, 42, 108, 0.7), rgba(3, 19, 44, 0.7));
  text-shadow: 1px 1px 1px #404040;
  border: 1px solid #3695ff;
  box-shadow: 4px 5px 5px 0px rgb(0 7 12 / 29%);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  /* position: absolute; */
  /* left: 50%; */
  /* transform: translate(-50%, -45px); */
  z-index: 99;
  /* top: 2px; */
}
.region-tab_abs2 {
  background-color: rgba(255, 0, 0, 1) !important;
  border: 1px solid rgb(230, 30, 30);
  /* background: linear-gradient(rgba(230, 30, 30, 0.5), rgba(3, 19, 44, 0.5)); */
}

.region-tab_abs2::after {
  border-top: 8px solid rgb(230, 30, 30, 0.5);
}
.region-tab div {
  /* white-space: nowrap; */
}
.region-tab:after {
  left: 50%;
  transform: translate(-50%, 0);
}

/*地图标记圆点*/
.region-spot {
  display: inline-flex;
  color: #00a0e9;
  justify-content: center;
  align-items: center;
  line-height: 110%;
  font-size: 12px;
}

.sign_box {
  /* width: 12px; */
  /* height: 12px; */
  position: relative;
  /* height: 100vh;
            width: 100vw; */
  /* background-color: #fff; */
}
</style>
